<script setup>
import newLoading from '@/components/newLoading/index.vue';

import { imgSynthsis, getImageByTaskId } from '@/api/painting'
import { usePaintingStore } from '@/store'
import { ref, provide } from "vue";
import { onLoad } from "@dcloudio/uni-app";


const paintingStore = usePaintingStore()

const queryParams = ref({})

const loading = ref(false)
const loadingRef = ref(null);
const taskId = ref('')
let timer = null


// 在画一张
function continueFn() {
    loading.value = true
    imgSynthsisFn()
}

// 保存图片
function saveImgFn() {
    paintingStore.accredit({ path: queryParams.value.imgPath })
}


// 关闭loading事件
function loadingClose() {
    clearInterval(timer);
}


// 获取任务状态
async function getImageByTaskIdFn() {
    const res = await getImageByTaskId(taskId.value)
    if (res.data.state === 1) {
        clearInterval(timer);
        await loadingRef.value.completeLoading()
        queryParams.value = res.data;
        queryParams.value.imgPath = queryParams.value.imgPath.split(";");
    } else if (![3, 4].includes(res.data.state)) {
        clearInterval(timer);
        const errorMessage = res.data?.remark.split('失败原因：')[1]
        Toast.fail(errorMessage);
        loading.value = false
    }
}



// 任务提交
async function imgSynthsisFn() {
    const res = await imgSynthsis(paintingStore.localRedrawing)
    taskId.value = res.data.taskId
    timer = setInterval(() => {
        getImageByTaskIdFn()
    }, 5000);

}



// 图片预览
function previewImageFn(imgPath) {
    uni.previewImage({
        current: imgPath,
        urls: queryParams.value.imgPath,
    });
}

onLoad((e) => {
    if (e.data) {
        queryParams.value = JSON.parse(e.data);
        queryParams.value.imgPath = queryParams.value.imgPath.split(";");
    }
});

function getQueryItemFn() {
    return queryParams.value
}

provide('getQueryItemFn', getQueryItemFn)
</script>

<template>
    <div class='localRedrawingDetail'>
        <NavBar>局部重绘</NavBar>
        <div class="container">
            <div class="img_box">
                <img :src="item" alt="" mode="aspectFill" class="imgSty" :class="{ more: queryParams.imgPath?.length >= 2 }"
                    v-for="item of queryParams.imgPath" @click="previewImageFn(item)" />
            </div>
            <div class="info_box">
                <div class="label">描述词：</div>
                <div class="text">{{ queryParams?.promptContent }}</div>

                <div class="label">绘画信息</div>
                <div class="text">
                    <span>画布尺寸</span>
                    <span class="num">{{ queryParams.size }}</span>
                </div>
                <div class="text">
                    <span>绘图时间</span>
                    <span class="num">{{ queryParams.createTime }}</span>
                </div>

            </div>
        </div>
        <div class="footer">
            <div class="footer-placeholder"></div>
            <div class="footer-content">
                <!-- <div class="f_item continue" @click="continueFn">在画一张</div> -->
                <div class="left">
                    <quickJump :show="[0, 1]"></quickJump>
                </div>
                <div class="f_item saveImg" @click="saveImgFn">保存图片</div>
            </div>
        </div>
    </div>
    <newLoading ref="loadingRef" v-model="loading" :duration="10000" :label="['排队中，预计等待时间10秒钟']" @close="loadingClose">
    </newLoading>
    <van-toast id="van-toast" />
</template>

<style lang='scss' scoped>
.localRedrawingDetail {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .container {
        flex: 1;
        padding: 0 30rpx;

        .img_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20rpx;
            margin-top: 32rpx;

            .imgSty {
                flex-shrink: 0;
                display: block;
                width: 100%;
                height: 916rpx;
                border-radius: 15rpx;

                &.more {
                    width: 335rpx;
                    height: 448rpx;
                }
            }
        }


        .info_box {
            margin-top: 32rpx;
            color: var(--a-one-text-color);

            .label {
                font-size: 24rpx;
                margin-top: 32rpx;

                &::before {
                    content: "";
                    display: inline-block;
                    width: 12rpx;
                    height: 18rpx;
                    background: var(--a-main-color);
                    margin-right: 10rpx;
                    border-radius: 6rpx;
                }
            }

            .text {
                font-size: 28rpx;
                color: var(--a-one-text-color);
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 16rpx;

                .num {
                    font-size: 24rpx;
                    color: #FFFFFF;
                }
            }
        }
    }


    .footer {

        .footer-placeholder {
            height: 176rpx;
        }

        .footer-content {
            box-sizing: border-box;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 176rpx;
            background: #212142;
            display: flex;
            align-items: center;
            gap: 24rpx;
            padding: 0 30rpx 20rpx;

            .left {
                width: 150rpx;
            }

            .f_item {
                box-sizing: border-box;
                flex: 1;
                height: 84rpx;
                border-radius: 42rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                &.continue {
                    color: var(--a-main-color);
                    border: 1rpx solid var(--a-main-color);
                }

                &.saveImg {
                    color: var(--a-one-text-color);
                    background: var(--a-main-color);
                }
            }

        }
    }
}
</style>